<template>
    <div>
        <h1>口算3</h1>
        <div>
            <el-button type="primary" @click="changeQues">换题</el-button>
        </div>
        <div style="padding:10px 10px;font-size: 40px;">
            <div v-for="(ques, index) in quesArr" style="margin-bottom: 5px;" :key="index">
                <span>{{ques.factor1}}</span>
                <span>{{ques.symbol1}}</span>
                (
                <span>{{ques.factor2}}</span>
                <span>{{ques.symbol2}}</span>
                <span>{{ques.factor3}}</span>
                )
                =
                <span>{{ques.factor1}}</span>
                <el-select v-model="ques.symbol3" placeholder="请选择" style="width: 100px;">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <span>{{ques.factor2}}</span>
                <el-select v-model="ques.symbol4" placeholder="请选择" style="width: 100px;">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <span>{{ques.factor3}}</span>
                <span style="margin-left: 5px;" v-show="showAnswer">
                        答案：{{ques.symbol3Answer}} &nbsp;{{ques.symbol4Answer}} &nbsp;
                        <i v-if="ques.symbol3Answer == ques.symbol3 && ques.symbol4Answer == ques.symbol4" class="el-icon-check" style="color:green"></i>
                        <i v-else class="el-icon-close" style="color:red"></i>
                    </span>
                <el-button type="primary" @click="addToLib(ques)">{{ques.added ? '已加' : '加入题库'}}</el-button>

            </div>
        </div>
        <div>
            <el-button type="primary" @click="submitAnswer">提交答案</el-button>
        </div>
    </div>
</template>

<script>
    import util from "@/util/util";

    export default {
        data() {
            return {
                product: 100,
                quesArr: [],
                showAnswer: false,
                options: [
                    {value: '+', label:'+'},
                    {value: '-', label:'-'},
                ]
            }
        },
        methods: {
            addToLib(ques) {
                let quesDesc = ques.factor1 + ques.symbol1 + "(" + ques.factor2 + ques.symbol2 + ques.factor3 + ")" + '=' + ques.factor1 + "__" + ques.factor2 + "__" + ques.factor3
                let ques2 = {
                    desc: quesDesc
                }
                util.addToLib(ques2)
                this.$set(ques, 'added', true)
            },
            changeQues() {

                this.showAnswer = false
                let quesArr = []
                let size = 5
                for(let i = 0; i < size; i++) {
                    let factor1 = parseInt(Math.random() * 100 + 50)
                    let factor2 = parseInt(Math.random() * 10 + 10)
                    let factor3 = parseInt(Math.random() * 5 + 1)
                    let symbol1 = Math.random() > 0.5 ? '+' : '-'
                    let symbol2 = Math.random() > 0.5 ? '+' : '-'
                    let symbol3Answer = symbol1
                    let symbol4Answer = symbol3Answer == '+' ? symbol2 : (symbol2 == '+' ? '-' : '+')
                    let ques = {
                        factor1,
                        factor2,
                        factor3,
                        symbol1,
                        symbol2,
                        symbol3Answer,
                        symbol4Answer,
                        symbol3: null,
                        symbol4: null,
                    }
                    quesArr.push(ques)
                }
                this.quesArr = quesArr
            },
            submitAnswer() {
                this.showAnswer = true
            },
        },
        mounted() {
            this.changeQues()
        }
    }
</script>

<style  scoped>
</style>
